<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>控制样式</title>
		<style type="text/css">
			.d1{
				border: 2px solid green;
				width: 500px;
				height: 500px;
			}
			.d2{
				border: 10px solid blue;
				width: 100px;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<div id="div1">
			div
		</div>
		<div id="div2">
			div2
		</div>
		<script>
			var div1 = document.getElementById("div1");
			div1.onclick = function(){
				//修改样式1
				div1.style.border = "1px solid red";
				div1.style.width = "200px";
				//font-size-->fontSize
				div1.style.fontSize="50px";
			}
			
			var div2 = document.getElementById("div2");
			div2.onclick = function(){
				//修改样式2
				div2.className="d1";
			}
		</script>
	</body>
</html>
